

<style>
    *{
        padding: 0;
        margin: 0;
    }
    #box{
        width: 300px;
        position: relative;
        margin: 10px auto;
    }
    #input{
        position: absolute;
        top:90px;
        left:0px;
        width:300px;
        height:65px;
        background: transparent;
        border:none;
        outline:none;
        color:white;
        font-size: 40px;
        text-align: right;
    }
    .d1{
        position: absolute;
        left: 1px;
        bottom: 76px;
        background: white;
        width: 74px;
        height: 74px;
        opacity: 0;
        cursor: pointer;
    }   
    #d2{
        left:75px;
    }
    #d3{
        left: 150px;
    }
    #d0{
        width:148px;
        left: 1px;
        bottom: 1px;
    }
    #d4{
        bottom: 150px;
    }
    #d5{
        bottom: 150px;
        left:75px;
    }
    #d6{
        bottom: 150px;
        left:150px;
    }
    #d7{
        bottom: 225px;
        left:1px;
    }
    #d8{
        bottom: 225px;
        left:75px;
    }
    #d9{
        bottom: 225px;
        left:150px;
    }
    #d{
        bottom: 1px;
        left:150px;
    }
    #jia{
        left: 225px;
    }
    #jian{
        bottom: 150px;
        left: 225px;
    }
    #chen{
        bottom: 225px;
        left: 225px;
    }
    #chu{
        bottom: 300px;
        left: 225px;
    }
    #baifen{
        bottom: 300px;
        left: 150px;
    }
    #zhengfu{
        bottom: 300px;
        left: 75px;
    }
    #dengyu{
        left:225px;
        bottom: 1px;
    }
    #clear{
        bottom: 300px;
        left: 1px;
    }
</style>

<div id="box">
    <img src="../image/cal.jpg" width="300"/>
    <input id="input" readonly/>
    <div class="d1" id="d0" onclick="show(0)"></div>
    <div class="d1" id="d1" onclick="show(1)"></div>
    <div class="d1" id="d2" onclick="show(2)"></div>
    <div class="d1" id="d3" onclick="show(3)"></div>
    <div class="d1" id="d4" onclick="show(4)"></div>
    <div class="d1" id="d5" onclick="show(5)"></div>
    <div class="d1" id="d6" onclick="show(6)"></div>
    <div class="d1" id="d7" onclick="show(7)"></div>
    <div class="d1" id="d8" onclick="show(8)"></div>
    <div class="d1" id="d9" onclick="show(9)"></div>
    <div class="d1" id="d" onclick="show('.')"></div>
    <div class="d1" id="jia" onclick="add()"></div>
    <div class="d1" id="jian" onclick="minus()"></div>
    <div class="d1" id="chen" onclick="times()"></div>
    <div class="d1" id="chu" onclick="devide()"></div>
    <div class="d1" id="baifen" onclick="percent()"></div>
    <div class="d1" id="zhengfu" onclick="zf()"></div>
    <div class="d1" id="dengyu" onclick="jisuan()"></div>
    <div class="d1" id="clear" onclick="qingChu()"></div>
</div>
<script>
    var num1;
    var num2;
    var flag;
    var fuhao;
    input.value = 0;
    
    function show(x){
        if(input.value.indexOf(0)==0||flag){
            input.value = "";
            jia.style.opacity = 0;
            jian.style.opacity = 0; 
            chen.style.opacity = 0;
            chu.style.opacity = 0;
            baifen.style.opacity = 0;       
        }
        flag = false;
        input.value = input.value+x;
    }
    function add(){
        jia.style.opacity = 0.3;
        num1 = parseFloat(input.value);
        flag = true;
        fuhao = 1;
    }
    function minus(){
        jian.style.opacity = 0.3;
        num1 = parseFloat(input.value);
        flag = true;   
        fuhao = 2;
    }
    function times(){
        chen.style.opacity = 0.3;
        num1 = parseFloat(input.value);
        flag = true;   
        fuhao = 3;
    }
    function devide(){
        chu.style.opacity = 0.3;
        num1 = parseFloat(input.value);
        flag = true;   
        fuhao = 4;
    }
    //按求余计算
    function percent(){
        baifen.style.opacity = 0.3;
        num1 = parseFloat(input.value);
        flag = true;   
        fuhao = 5;
    }
    
    //按百分比计算
    /*function percent(){
        input.value = parseFloat(input.value)/100;   
        fuhao = 1;
        fuhao = 2;
        fuhao = 3;
        fuhao = 4;
    }*/
    function zf(){
        input.value = 0 - parseFloat(input.value);   
        fuhao = 1;
        fuhao = 2;
        fuhao = 3;
        fuhao = 4;
        fuhao = 5;
    }
        
    function jisuan(){
       num2 = parseFloat(input.value);
       if(fuhao==1){
          input.value = num1 + num2;
       }
       if(fuhao==2){
          input.value = num1 - num2;
       }
        if(fuhao==3){
          input.value = num1 * num2;
       }
       if(fuhao==4){
           if(num2==0){
               input.value = "除数不能为0";
           }else{
               input.value = num1 / num2;
           }      
       }
       if(fuhao==5){
          input.value = num1 % num2;
       }
    }
    function qingChu(){
        input.value =0;
    }
</script>



